<template>
  <div class="map_page">
    <div id="container" class="map_wrap"></div>
    <!-- <div id="panel" class="map_result"></div> -->
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { MAP_KEYS, MAP_PLUGINS } from "@/common/constants";
export default {
  name: "AddressMap",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      aMap: "",
    };
  },
  created() { },
  async mounted() {
    let _this = this;
    let AMap = await AMapLoader.load({
      key: MAP_KEYS, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: MAP_PLUGINS, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })

    let aMap = new AMap.Map("container", {
      resizeEnable: true,
      zoom: 14,
    });

    AMap.plugin(MAP_PLUGINS, function () {
      aMap.addControl(new AMap.ToolBar());
      aMap.addControl(new AMap.Scale());
    });

    if (!_this.disabled) {
      // 绑定事件
      aMap.on("click", _this.mapClickEvent);
    }

    _this.aMap = aMap;

    // 判断是否有经纬度
    setTimeout(function(){
      let o = _this.info
    if (o && o.lng) {
      _this.drawMarker(o.lng, o.lat, o.name)
    }
    },100)
   

    console.log(_this.info)

  },
  methods: {
    // 地图点击事件
    mapClickEvent(e) {
      console.log(e);
      let _this = this;
      let map = this.aMap;
      let lng = e.lnglat.getLng();
      let lat = e.lnglat.getLat();
      let marker = new AMap.Marker({
        anchor: "top-center",
        position: new AMap.LngLat(lng, lat),
      });
      let geocoder = new AMap.Geocoder({ extensions: "all" });

      geocoder.getAddress([lng, lat], function (status, result) {
        console.log(result);
        if (status === "complete" && result.info === "OK") {
          let m = result.regeocode;
          let allAddress = m.formattedAddress;
          let area =
            m.addressComponent.province +
            m.addressComponent.city +
            m.addressComponent.district;
          let address = allAddress.replace(area, "");
          let code = m.addressComponent.adcode;
          console.log(code);
          // result为对应的地理位置详细信息
          let infoWindow = new AMap.InfoWindow({
            content: result.regeocode.formattedAddress,
          });
          marker.on("click", function () {
            infoWindow.open();
          });
          _this.aMap.clearMap();
          _this.aMap.add(marker);
          infoWindow.open(map, [lng, lat]);
          _this.$emit("change", {
            lng: lng,
            lat: lat,
            address: address,
            code: [
              code.substring(0, 2) + "0000",
              code.substring(0, 4) + "00",
              code,
            ],
            name: [
              m.addressComponent.province,
              m.addressComponent.city,
              m.addressComponent.district,
            ],
          });
        }
      });
    },

    // 地图搜索
    mapSearchEvent(keywords) {
      let _this = this;
      return new Promise((resolve, reject) => {
        //构造地点查询类
        //let map = _this.aMap;
        let geocoder = new AMap.Geocoder();
        geocoder.getLocation(keywords, function (status, result) {
          //console.log(result)
          if (status !== 'complete') {
            reject()
            return false;
          }
          let geocodes = result.geocodes || []
          let o = geocodes[0] || {}
          let location = o.location || {}
          if (location.lng) {
            let params = {}
            params.lng = location.lng
            params.lat = location.lat
            _this.drawMarker(location.lng, location.lat, o.formattedAddress)
            _this.$emit('change', params)
            resolve(params)
          }
        })
      })
    },

    // 地图标记点
    drawMarker(lng, lat, address) {
      let _this = this;
      let marker = new AMap.Marker({
        anchor: "top-center",
        position: new AMap.LngLat(lng, lat),
      });

      // result为对应的地理位置详细信息
      let infoWindow = new AMap.InfoWindow({
        content: address,
      });
      marker.on("click", function () {
        infoWindow.open();
      });
      _this.aMap.clearMap();
      _this.aMap.add(marker);
      infoWindow.open(_this.aMap, [lng, lat]);
      _this.aMap.setFitView()
    }

  },
};
</script>
<style lang="scss" scoped>
.map_page {
  position: relative;

  .map_result {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    overflow: auto;
  }
}

.map_wrap {
  width: 100%;
  min-height: 400px;
}
</style>